//比赛时间比例（功能18）
//数据格式：{[],[]}
<template>
  <div>
    <blockquote>数据截止至2021年8月18日晚上7:00</blockquote>
    <div id="function16" :style="{ width: '1000px', height: '700px' }" />
  </div>
</template>
<script>
import stores from "@/store";
export default {
  mounted() {
    this.$axios
      .post(stores.spring_url + "/matchtime/rate", "function18")
      .then((res) => {
        //console.log(res.data.tableData)
        this.init(res.data.tableData);
      });
  },
  methods: {
    init(res) {
      console.log(res);
      const dataA = [];
      const dataB = [];
      for (let i of res) {
        dataA.push(i.time);
        dataB.push({ name: i.time, value: i.count });
      }

      const myChart = this.$echarts.init(document.getElementById("function16"));
      myChart.setOption({
        title: {
          text: "比赛时间比例",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: dataA,

          selected: dataA.selected,
        },
        series: [
          {
            name: "时间段",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: dataB,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },

    test() {
      console.log("hahahaha");
    },
  },
};
</script>
<style>
blockquote {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
  font-size: 12px;
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  background: #fde2e2;
  border: 1px solid #f56c6c;
  padding-left: 15px;
  color: #f55151;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
}
</style>